import React from 'react';
import {View, StyleSheet,Image,Dimensions, ScrollView} from 'react-native';
import {ClipPathView} from 'react-native-clippathview';
import { Colors } from 'react-native/Libraries/NewAppScreen';

const ClipPathViewDemo = () => {
  return (
    <View>
      <ScrollView>
        <View style = {styles.viewItem}>
          <ClipPathView
            fillRule = {'evenodd'}
            fillColor = {0x550066}
            fillOpacity = {0.5}
          >
            <Image
            style={styles.logo}
            source={require('./1.png')}
            />
          </ClipPathView>
        </View>
        <View style = {styles.viewItem}>
          <ClipPathView
            strokeOpacity = {0.1}
            strokeWidth = {3}
          >
            <Image
            style={styles.logo}
            source={require('./1.png')}
            />
          </ClipPathView>
        </View>
        <View style = {styles.viewItem}>
          <ClipPathView
            shadowColor = {0x005566}
            shadowOpacity = {0.5}
            shadowRadius = {10}
            shadowOffsetX = {3.5}
            shadowOffsetY = {3.5}
            shadowOffsetIsPercent = {true}
          >
            <Image
            style={styles.logo}
            source={require('./1.png')}
            />
          </ClipPathView>
        </View>
        <View style = {styles.viewItem}>
          <ClipPathView
            bgColor = {0x660000}
            rotation = {0.5}
            rotationIsPercent = {true}
          >
            <Image
            style={styles.logo}
            source={require('./1.png')}
            />
          </ClipPathView>
        </View>
        <View style = {styles.viewItem}>
          <ClipPathView
            bgColor = {0x660000}
            rotationOx= {0.5}
            rotationIsPercent = {true}          >
            <Image
            style={styles.logo}
            source={require('./1.png')}
            />
          </ClipPathView>
        </View>
        <View style = {styles.viewItem}>
                  <ClipPathView
                    bgColor = {0x660000}
                    rotationOy= {0.5}
                    rotationIsPercent = {true}          >
                    <Image
                    style={styles.logo}
                    source={require('./1.png')}
                    />
                  </ClipPathView>
                </View>
        <View style = {styles.viewItem}>
          <ClipPathView
            scale = {10.3}
          >
            <Image
            style={styles.logo}
            source={require('./1.png')}
            />
          </ClipPathView>
        </View>
        <View style = {styles.viewItem}>
          <ClipPathView
            bgColor = {0x660000}
            scaleX = {0.5}
            scaleIsPercent = {true}
          >
            <Image
            style={styles.logo}
            source={require('./1.png')}
            />
          </ClipPathView>
        </View>
        <View style = {styles.viewItem}>
          <ClipPathView
            bgColor = {0x660000}
            scaleY = {0.5}
            scaleIsPercent = {true}
          >
            <Image
            style={styles.logo}
            source={require('./1.png')}
            />
          </ClipPathView>
        </View>
        <View style = {styles.viewItem}>
        <ClipPathView
            bgColor = {0x660000}
            scaleOriginX = {0.3}
            scaleIsPercent = {true}
          >
            <Image
            style={styles.logo}
            source={require('./1.png')}
            />
          </ClipPathView>
        </View>
        <View style = {styles.viewItem}>
          <ClipPathView
            bgColor = {0x660000}
            scaleOriginY = {0.3}
            scaleIsPercent = {true}
          >
            <Image
            style={styles.logo}
            source={require('./1.png')}
            />
          </ClipPathView>
        </View>
        <View style = {styles.viewItem}>
          <ClipPathView
            bgColor = {0x660000}
            strokeColor = {0x00FF00}
            strokeWidth = {0.3}
            translationX = {10.0}
            translationY = {10.0}
          >
            <Image
            style={styles.logo}
            source={require('./1.png')}
            />
          </ClipPathView>
        </View>

        <View style = {styles.viewItem}>
          <ClipPathView
            bgColor = {0x660000}
            strokeColor = {0x2E8B57}
            strokeWidth = {0.8}
            translationX = {50.0}
            translationY = {50.0}
          >
            <Image
            style={styles.logo}
            source={require('./1.png')}
            />
          </ClipPathView>
        </View>
      </ScrollView>
    </View>
  );
};


const styles = StyleSheet.create({
    containerBase:{
      backgroundColor:'black',
      justifyContent:'center',
      margin:2
     },
     viewItem: {
      width: Dimensions.get('window').width/2 - 2,
      height: Dimensions.get('window').height/4 - 10,
      borderWidth:2,
      margin:2,
      flexWrap:'wrap',
      flexDirection:'row',
    },
    logo: {
      width: Dimensions.get('window').width/2 - 2,
      height: Dimensions.get('window').height/4 - 10,
      borderWidth:2
    }
});

export default ClipPathViewDemo;
